<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myCanvas').getContext('2d');
var lineCap = ['butt','round','square'];
// 绘制参考线。
ctx.strokeStyle = 'red';
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(10,150);
ctx.moveTo(150,10);
ctx.lineTo(150,150);
ctx.stroke();
// 绘制直线段。
ctx.strokeStyle = 'blue';
for (var i=0;i<lineCap.length;i++){
	ctx.lineWidth = 20;  
	ctx.lineCap = lineCap[i];
	ctx.beginPath();
	ctx.moveTo(10,30+i*50);
	ctx.lineTo(150,30+i*50); 
	ctx.stroke();
}

</script>
</body>
</html>  
